<template>
  <view>
    <view class="search">
      <my-search @click='toSearch' bgc="pink"></my-search>
    </view>
    <view class="top">
      <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
        <swiper-item v-for='(item,index) in swiperList' :key="index">
          <navigator :url='item.navigator_url'>
            <image :src='item.image_src'></image>
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 分类导航 -->
    <view class="list">
      <view class="pic" @click="toCate(item.name)" v-for="(item,index) in list " :key="index">
        <image :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>
    <!-- 楼层 -->
    <view class="floordata">
      <view class="floor" v-for="(item,index) in floorDataList" :key="index">
        <view class="title">
          <image :src="item.floor_title.image_src" mode="widthFix"></image>
        </view>
        <view class="itemlist">
          <view class="left">
            <image @click="toList(item.product_list[0].name)"
              :style="{ width: `${item.product_list[0].image_width}rpx` }" :src="item.product_list[0].image_src"
              mode="widthFix"></image>
          </view>
          <view class="right">
            <template v-for="(sub, i) in item.product_list">
              <image @click="toList(sub.name)" :style="{ width: `${sub.image_width}rpx` }" v-if="i !== 0"
                :src="sub.image_src" mode="widthFix" :key="i">
              </image>
            </template>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mymixins from '../../mixins/index.js'
  export default {
    mixins: [mymixins],
    data() {
      return {
        swiperList: [],
        list: [],
        floorDataList: []
      };
    },
    onLoad() {
      this.getSwiper()
      this.getList()
      this.getfloordata()
    },

    methods: {
      toSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      toList(name) {
        uni.navigateTo({
          url: `/pages/list/list?key=${name}`
        })
      },
      //判断是不是分类
      toCate(name) {
        if (name === "分类") {
          uni.switchTab({
            url: '/pages/cate/cate'
          })
        }
      },
      //轮播图
      async getSwiper() {
        const res = await uni.$http.get('/api/public/v1/home/swiperdata')
        console.log('轮播图', res);
        if (res.data.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.swiperList = res.data.message
      },
      //获取分类导航
      async getList() {
        // 将接口返回的对象中的 data 属性解构出来，再给它设置一个别名为 res
        let {
          data: res
        } = await uni.$http.get('/api/public/v1/home/catitems')
        console.log('分类', res);
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.list = res.message
      },
      //获取楼层
      async getfloordata() {
        let {
          data: res
        } = await uni.$http.get('/api/public/v1/home/floordata')
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.floorDataList = res.message
      }
    }
  }
</script>

<style lang="scss">
  .search {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .top {
    .swiper {
      height: 360rpx;

      image {
        width: 100%;
        height: 360rpx;
      }
    }
  }

  .list {
    display: flex;
    padding: 40rpx 0;

    .pic {
      width: 25%;
      text-align: center;

      image {
        width: 80%;
      }
    }
  }

  .floordata {
    .floor {
      .title {
        image {
          width: 100%;
        }
      }

      .itemlist {
        display: flex;
        margin: 0 14rpx;

        .left {
          margin-right: 10rpx;
        }

        .right {
          display: flex;
          flex-wrap: wrap;

          image {

            &:nth-child(1),
            &:nth-child(3) {
              margin-right: 10rpx;
            }
          }
        }
      }

    }
  }
</style>
